<template>
  <div
    class="container"
    ref="containerRef"
    @mousedown="onMouseDown"
    @mousemove="onMouseMove"
    @mouseleave="onMouseLeave"
    @mouseup="onMouseUp"
    @wheel="onWheel"
    onselectstart="return false"
  >
    <div class="content" ref="contentRef" :style="contentStyle">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { getHtmlElementSize } from './hooks'

// 初始化缩放比例
const initZoom = ref(1)

// 内容缩放比例
const targetZoom = ref(1)

// 容器 html 元素的引用
const containerRef = ref()
// 容器的宽度
const containerWidth = ref(0)
// 容器的高度
const containerHeight = ref(0)

// 内容 html 元素的引用
const contentRef = ref()
// 内容的宽度
const contentWidth = ref(0)
// 内容的高度
const contentHeight = ref(0)

// 内容的目标宽度
const contentTargetWidth = ref(1)
// 内容的目标高度
const contentTargetHeight = ref(1)

// 内容默认位置
const contentDefaultLeft = ref(0)
const contentDefaultTop = ref(0)

// 内容的目标位置
const contentTargetLeft = ref(0)
const contentTargetTop = ref(0)

// 内容的 left 偏移量
const contentLeft = computed(() => {
  return contentDefaultLeft.value + contentTargetLeft.value
})
// 内容的 top 偏移量
const contentTop = computed(() => {
  return contentDefaultTop.value + contentTargetTop.value
})

// 内容的中心点与容器中心点的 x 轴偏移量
const centerDiffX = computed(() => {
  return (containerWidth.value - contentWidth.value) / 2
})

// 内容的中心点与容器中心点的 y 轴偏移量
const centerDiffY = computed(() => {
  return (containerHeight.value - contentHeight.value) / 2
})

// 内容实际的缩放比例
const contentZoom = computed(() => {
  return targetZoom.value
})

/**
 * 刷新容器的尺寸
 */
const refreshContainerSize = () => {
  if (containerRef.value == null) {
    console.warn('容器未加载完成')
  }
  ;[containerWidth.value, containerHeight.value] = getHtmlElementSize(containerRef.value)
}

/**
 * 刷新内容的尺寸
 */
const refreshContentSize = () => {
  if (containerRef.value == null) {
    console.warn('内容未加载完成')
  }
  ;[contentWidth.value, contentHeight.value] = getHtmlElementSize(contentRef.value)
}

// 容器的宽高比
const containerWHRatio = computed(() => {
  return containerWidth.value / containerHeight.value
})

// 内容的宽高比
const contentWHRatio = computed(() => {
  return contentWidth.value / contentHeight.value
})

/**
 * 初始化内容的位置（居中）
 */
const initPosition = () => {
  contentDefaultLeft.value = centerDiffX.value
  contentDefaultTop.value = centerDiffY.value
}
</script>
<style scoped lang="scss">
@import url('./index.scss');
</style>
